<!--侧边菜单栏-->
<template>
    <div class="sidebar">
        <el-scrollbar>
            <el-aside width="200px">
                <el-scrollbar style="height: 100%;" wrap-class="scrollbar-wrapper">
                    <el-menu
                            class="menu-wrap"
                            background-color="#1E2140"
                            text-color="#BECCF6"
                            :default-openeds="nowTabGroup"
                            :default-active="nowTabActive"
                            unique-opened
                    >
                        <!--<sidebar-item :menus="view" />-->
                        <sidebar-item :menus="menu" />
                    </el-menu>
                </el-scrollbar>
            </el-aside>
        </el-scrollbar>
    </div>
</template>

<script setup>
  import {computed,ref,watch} from 'vue'
  import {useStore} from "vuex"
  import { useRouter} from 'vue-router'

  import {view} from '@/router/view'
  //组件
  import SidebarItem from './sidebarItem'
  //路由
  let store = useStore(),
    router = useRouter();

  let menu = computed(() => store.getters.getMenus)
  let nowTabActive = computed(() => {
    let curRoute = router.currentRoute.value
    console.log(curRoute);
    return curRoute.meta.menuId
  })
  let nowTabGroup = computed(() => {
    let curRoute = router.currentRoute.value;
    return [curRoute.meta.parMenuId]
  })



</script>

<style scoped lang="less">
    .sidebar{
        height: 100%;
        background: #1E2140;
        width: 100%;
        overflow: hidden;
        .menu-wrap{
            border-right: none;
            ::v-deep{
                .el-menu-item{
                    height: 56px;
                    color: #BECCF6;
                    &.is-active{
                        background: #353854;
                        color: #fff;
                    }
                }
            }
        }
    }
</style>
